import React from 'react';
import { Card, Col, Row } from 'antd';
import '../css/Services.css';

const { Meta } = Card;

export default function Services() {
  return (
    <section className="services-container">
      <h1 className="services-title">凯泽利自动化测试平台服务</h1>
      
      <Row gutter={[24, 24]} className="services-row">
        <Col xs={24} sm={12} lg={8}>
          <Card
            hoverable
            cover={<img alt="平台架构" src="https://via.placeholder.com/300x200?text=平台架构" />}
          >
            <Meta 
              title="平台架构与兼容性" 
              description="采用先进的Web服务器架构，具备出色的双客户端兼容性，无缝适配Web和Windows两大主流客户端环境。"
            />
          </Card>
        </Col>

        <Col xs={24} sm={12} lg={8}>
          <Card
            hoverable
            cover={<img alt="远程执行" src="https://via.placeholder.com/300x200?text=远程执行" />}
          >
            <Meta 
              title="远程执行与监控" 
              description="支持远程执行测试任务，同时对多个台架进行集中操作，提供实时、精准的测试结果监控功能。"
            />
          </Card>
        </Col>

        <Col xs={24} sm={12} lg={8}>
          <Card
            hoverable
            cover={<img alt="脚本同步" src="https://via.placeholder.com/300x200?text=脚本同步" />}
          >
            <Meta 
              title="脚本云同步" 
              description="实现脚本的云同步功能，方便团队成员之间的脚本共享和协作，确保脚本的一致性和完整性。"
            />
          </Card>
        </Col>

        <Col xs={24} sm={12} lg={8}>
          <Card
            hoverable
            cover={<img alt="测试覆盖" src="https://via.placeholder.com/300x200?text=测试覆盖" />}
          >
            <Meta 
              title="测试覆盖与兼容性" 
              description="对IVI的所有输入输出进行全面支持，覆盖90%以上的测试用例，检测绝大多数可能存在的问题。"
            />
          </Card>
        </Col>

        <Col xs={24} sm={12} lg={8}>
          <Card
            hoverable
            cover={<img alt="集中管理" src="https://via.placeholder.com/300x200?text=集中管理" />}
          >
            <Meta 
              title="集中管理与分析" 
              description="集中管理测试脚本和测试报告，提供强大的报告分析工具，为软件优化和改进提供依据。"
            />
          </Card>
        </Col>

        <Col xs={24} sm={12} lg={8}>
          <Card
            hoverable
            cover={<img alt="技术支持" src="https://via.placeholder.com/300x200?text=技术支持" />}
          >
            <Meta 
              title="专业支持服务" 
              description="提供7×24小时专业技术支持，定期平台升级和维护，确保系统稳定运行。"
            />
          </Card>
        </Col>
      </Row>
    </section>
  );
}